/**
 * 品牌页纯粹达成率图表组件
 */
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import http from '@/axios/http'
import adaptivePx from '@/utils/adaptivePx'

const route = useRoute()
const brand = ref(route.query.brand)

const main = ref()
const pureChart = ref()
const pureDetail = ref()
let myChart = null

const date = new Date()
const lastYear = (date.getFullYear() - 1) + '年'
const thisTarget = String(date.getFullYear()).substring(2) + '年目标'
const thisYear = date.getFullYear() + '年'

async function getPureChart() {
  await http.post('/brand/getPureChart', {
    brand: brand.value
  }).then(res => {
    pureChart.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

async function getPureDetail() {
  await http.post('/brand/getPureDetail', {
    brand: brand.value
  }).then(res => {
    pureDetail.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

function init() {
  myChart = echarts.init(main.value, null, { renderer: 'svg'})

  let option = {
    title: {
      text: '纯粹达成率⭐',
      textStyle: {
        color: 'white',
        fontSize: adaptivePx(16),
        fontWeight: 'normal'
      },
      left: '2%',
      top: '2%'
    },
    color: ['#1e90ff', '#6a43ff', '#2fa8c3'],
    legend: {
      textStyle: {
        color: 'white',
        fontSize: adaptivePx(14),
        fontWeight: 'normal'
      },
      top: '2%',
      right: '2%',
      data: [lastYear, thisTarget, thisYear]
    },
    grid: {
      left: '3%',
      top: '27%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      boundaryGap: false,
      axisLabel: {
        color: 'white',
        fontSize: adaptivePx(12),
        fontWeight: 'normal'
      },
      data: pureChart.value.month
    },
    yAxis: {
      max: function (value) {
        if (value.max > 100) {
          return 120
        } else {
          return 100
        }
      },
      min: 0,
      interval: 25,
      axisLabel: {
        color: 'white',
        formatter: '{value} %',
        fontSize: adaptivePx(12),
        fontWeight: 'normal'
      },
      axisLine: {
        lineStyle: {
          type: 'solid'
        },
        show: true
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#666'
        },
        show: true
      }
    },
    series: [
      {
        name: lastYear,
        type: 'line',
        data: pureChart.value.lastPureChart,
        emphasis: {
          scale: 3
        },
        label: {
          show: true,
          color: 'white',
          fontSize: adaptivePx(12),
          fontWeight: 'normal',
          formatter: function(params) {
            if (params && params.data > 0) {
              return params.data + '%'
            }
            return ''
          },
          textBorderColor: 'inherit',
          textBorderWidth: adaptivePx(2),
          position: 'bottom'
        }
      },
      {
        name: thisTarget,
        type: 'line',
        data: pureChart.value.targetPureChart,
        emphasis: {
          scale: 3
        },
        label: {
          show: true,
          color: 'white',
          fontSize: adaptivePx(12),
          fontWeight: 'normal',
          formatter: function(params) {
            if (params && params.data > 0) {
              return params.data + '%'
            }
            return ''
          },
          textBorderColor: 'inherit',
          textBorderWidth: adaptivePx(2),
          position: 'inside'
        }
      },
      {
        name: thisYear,
        type: 'line',
        data: pureChart.value.thisPureChart,
        areaStyle: {
          opacity: 0.2
        },
        emphasis: {
          scale: 3
        },
        label: {
          show: true,
          color: 'white',
          fontSize: adaptivePx(12),
          fontWeight: 'normal',
          formatter: function(params) {
            if (params && params.data > 0) {
              return params.data + '%'
            }
            return ''
          },
          textBorderColor: 'inherit',
          textBorderWidth: adaptivePx(2),
          position: 'top'
        }
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        axis: 'x',
        lineStyle: {
          type: 'solid',
          color: '#ccc',
          width: 3
        }
      },
      textStyle: {
        color: 'black',
        fontSize: adaptivePx(14),
        fontWeight: 'normal'
      },
      backgroundColor: 'rgba(171, 182, 212, 0.9)',
      borderWidth: 0,
      position: function (point, params, dom, rect, size) {
        return [point[0] + adaptivePx(20), point[1] - size.contentSize[1] * 0.5]
      },
      formatter: function (params) {
        let year = (new Date()).getFullYear()
        let month = pureDetail.value[params[0].name == 'Total' ? 'YY' : params[0].name]
        let content = ''

        let hasTarget = false
        let hasThis = false
        let hasLast = false
        let length = Object.keys(month).length
        let count = 0

        if (JSON.stringify(month) == '{}') {
          return "暂无数据"
        }

        content += `
          <div style="display: flex; justify-content: center; align-items: flex-start;">
            <table style="text-align: center; font-weight: normal;">
              <thead>
                <tr>
                  <th></th>
                  <th></th>
        `
        
        for (let factory in month) {
          if (count >= (length > 5 ? Math.round(length / 2) : 5)) {
            break
          }
          count++

          for (let type in month[factory]) {
            if (type == 'thisTarget') {
              hasTarget = true
            }
            if (type == 'thisYear') {
              hasThis = true
            }
            if (type == 'lastYear') {
              hasLast = true
            }
          }
        }

        if (hasTarget) {
          content += `
                  <th>&nbsp;&nbsp;目标&nbsp;</th>
          `
        }

        if (hasThis) {
          content += `
                  <th>&nbsp;${ year }年${ params[0].name === 'Total' ? '全年' : params[0].name + '月' }&nbsp;</th>
          `
        }

        if (hasLast) {
          content += `
                  <th>&nbsp;${ year - 1 }年${ params[0].name === 'Total' ? '全年' : params[0].name + '月' }&nbsp;</th>
          `
        }

        if (hasThis && hasLast) {
          content += `
                  <th>&nbsp;VS${ String(year - 1).substring(2) }&nbsp;</th>
          `
        }

        content += `
                </tr>
              </thead>
              <tbody>
        `
        
        count = 0

        for (let factory in month) {
          if (count >= (length > 5 ? Math.round(length / 2) : 5)) {
            break
          }
          count++

          let thisTarget = month[factory].thisTarget
          let thisYear = month[factory].thisYear
          let lastYear = month[factory].lastYear

          content += `
                <tr>
                  <td style="text-align: left;">${ factory }&nbsp;</td>
                  <td>加工1</td>
          `
          if (hasTarget) {
            content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate1 : 0 }%</td>
            `
          }
          if (hasThis) {
            if (hasTarget) {
              let diff = (thisTarget ? thisTarget.rate1 : 0) - (thisYear ? thisYear.rate1 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: red;">${ thisYear ? thisYear.rate1 : 0 }%</td>
                `
              } else {
                content += `
                  <td>${ thisYear ? thisYear.rate1 : 0 }%</td>
                `
              }
            } else {
              content += `
                  <td>${ thisYear ? thisYear.rate1 : 0 }%</td>
              `
            }
          }
          if (hasLast) {
            content += `
                  <td>${ lastYear ? lastYear.rate1 : 0 }%</td>
            `
          }
          if (hasThis && hasLast) {
            let diff = (thisYear ? thisYear.rate1 : 0) - (lastYear ? lastYear.rate1 : 0)
            if (diff > 0) {
              content += `
                  <td style="color: blue;">+${ diff }%</td>
              `
            } else {
              content += `
                  <td style="color: red;">${ diff }%</td>
              `
            }
          }
          content += `
                </tr>
          `

          content += `
                <tr>
                  <td></td>
                  <td>裁断</td>
          `
          if (hasTarget) {
            content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate2 : 0 }%</td>
            `
          }
          if (hasThis) {
            if (hasTarget) {
              let diff = (thisTarget ? thisTarget.rate2 : 0) - (thisYear ? thisYear.rate2 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: red;">${ thisYear ? thisYear.rate2 : 0 }%</td>
                `
              } else {
                content += `
                  <td>${ thisYear ? thisYear.rate2 : 0 }%</td>
                `
              }
            } else {
              content += `
                  <td>${ thisYear ? thisYear.rate2 : 0 }%</td>
              `
            }
          }
          if (hasLast) {
            content += `
                  <td>${ lastYear ? lastYear.rate2 : 0 }%</td>
            `
          }
          if (hasThis && hasLast) {
            let diff = (thisYear ? thisYear.rate2 : 0) - (lastYear ? lastYear.rate2 : 0)
            if (diff > 0) {
              content += `
                  <td style="color: blue;">+${ diff }%</td>
              `
            } else {
              content += `
                  <td style="color: red;">${ diff }%</td>
              `
            }
          }
          content += `
                </tr>
          `

          content += `
                <tr>
                  <td></td>
                  <td>鞋面</td>
          `
          if (hasTarget) {
            content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate3 : 0 }%</td>
            `
          }
          if (hasThis) {
            if (hasTarget) {
              let diff = (thisTarget ? thisTarget.rate3 : 0) - (thisYear ? thisYear.rate3 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: red;">${ thisYear ? thisYear.rate3 : 0 }%</td>
                `
              } else {
                content += `
                  <td>${ thisYear ? thisYear.rate3 : 0 }%</td>
                `
              }
            } else {
              content += `
                  <td>${ thisYear ? thisYear.rate3 : 0 }%</td>
              `
            }
          }
          if (hasLast) {
            content += `
                  <td>${ lastYear ? lastYear.rate3 : 0 }%</td>
            `
          }
          if (hasThis && hasLast) {
            let diff = (thisYear ? thisYear.rate3 : 0) - (lastYear ? lastYear.rate3 : 0)
            if (diff > 0) {
              content += `
                  <td style="color: blue;">+${ diff }%</td>
              `
            } else {
              content += `
                  <td style="color: red;">${ diff }%</td>
              `
            }
          }
          content += `
                </tr>
          `
          
          content += `
                <tr>
                  <td></td>
                  <td>半成品</td>
          `
          if (hasTarget) {
            content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate4 : 0 }%</td>
            `
          }
          if (hasThis) {
            if (hasTarget) {
              let diff = (thisTarget ? thisTarget.rate4 : 0) - (thisYear ? thisYear.rate4 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: red;">${ thisYear ? thisYear.rate4 : 0 }%</td>
                `
              } else {
                content += `
                  <td>${ thisYear ? thisYear.rate4 : 0 }%</td>
                `
              }
            } else {
              content += `
                  <td>${ thisYear ? thisYear.rate4 : 0 }%</td>
              `
            }
          }
          if (hasLast) {
            content += `
                  <td>${ lastYear ? lastYear.rate4 : 0 }%</td>
            `
          }
          if (hasThis && hasLast) {
            let diff = (thisYear ? thisYear.rate4 : 0) - (lastYear ? lastYear.rate4 : 0)
            if (diff > 0) {
              content += `
                  <td style="color: blue;">+${ diff }%</td>
              `
            } else {
              content += `
                  <td style="color: red;">${ diff }%</td>
              `
            }
          }
          content += `
                </tr>
          `

          content += `
                <tr>
                  <td></td>
                  <td>成型</td>
          `
          if (hasTarget) {
            content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate5 : 0 }%</td>
            `
          }
          if (hasThis) {
            if (hasTarget) {
              let diff = (thisTarget ? thisTarget.rate5 : 0) - (thisYear ? thisYear.rate5 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: red;">${ thisYear ? thisYear.rate5 : 0 }%</td>
                `
              } else {
                content += `
                  <td>${ thisYear ? thisYear.rate5 : 0 }%</td>
                `
              }
            } else {
              content += `
                  <td>${ thisYear ? thisYear.rate5 : 0 }%</td>
              `
            }
          }
          if (hasLast) {
            content += `
                  <td>${ lastYear ? lastYear.rate5 : 0 }%</td>
            `
          }
          if (hasThis && hasLast) {
            let diff = (thisYear ? thisYear.rate5 : 0) - (lastYear ? lastYear.rate5 : 0)
            if (diff > 0) {
              content += `
                  <td style="color: blue;">+${ diff }%</td>
              `
            } else {
              content += `
                  <td style="color: red;">${ diff }%</td>
              `
            }
          }
          content += `
                </tr>
          `

          content += `
                <tr>
                  <td></td>
                  <td>合计</td>
          `
          if (hasTarget) {
            content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate6 : 0 }%</td>
            `
          }
          if (hasThis) {
            if (hasTarget) {
              let diff = (thisTarget ? thisTarget.rate6 : 0) - (thisYear ? thisYear.rate6 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: red;">${ thisYear ? thisYear.rate6 : 0 }%</td>
                `
              } else {
                content += `
                  <td>${ thisYear ? thisYear.rate6 : 0 }%</td>
                `
              }
            } else {
              content += `
                  <td>${ thisYear ? thisYear.rate6 : 0 }%</td>
              `
            }
          }
          if (hasLast) {
            content += `
                  <td>${ lastYear ? lastYear.rate6 : 0 }%</td>
            `
          }
          if (hasThis && hasLast) {
            let diff = (thisYear ? thisYear.rate6 : 0) - (lastYear ? lastYear.rate6 : 0)
            if (diff > 0) {
              content += `
                  <td style="color: blue;">+${ diff }%</td>
              `
            } else {
              content += `
                  <td style="color: red;">${ diff }%</td>
              `
            }
          }
          content += `
                </tr>
          `
        }

        content += `
              </tbody>
            </table>
        `
        
        // 超过 5 个工厂
        if (length > 5) {
          hasTarget = false
          hasThis = false
          hasLast = false
          count = 0

          content += `
            <table style="text-align: center; font-weight: normal;">
              <thead>
                <tr>
                  <th></th>
                  <th></th>
          `

          for (let factory in month) {
            if (count < Math.round(length / 2)) {
              count++
              continue
            }

            for (let type in month[factory]) {
              if (type == 'thisTarget') {
                hasTarget = true
              }
              if (type == 'thisYear') {
                hasThis = true
              }
              if (type == 'lastYear') {
                hasLast = true
              }
            }
          }

          if (hasThis) {
            content += `
                  <th>&nbsp;目标&nbsp;</th>
            `
          }

          if (hasThis) {
            content += `
                  <th>&nbsp;${ year }年${ params[0].name === 'Total' ? '全年' : params[0].name + '月' }&nbsp;</th>
            `
          }

          if (hasLast) {
            content += `
                  <th>&nbsp;${ year - 1 }年${ params[0].name === 'Total' ? '全年' : params[0].name + '月' }&nbsp;</th>
            `
          }

          if (hasThis && hasLast) {
            content += `
                  <th>&nbsp;VS${ String(year - 1).substring(2) }&nbsp;</th>
            `
          }

          content += `
                </tr>
              </thead>
              <tbody>
          `
          
          count = 0

          for (let factory in month) {
            if (count < Math.round(length / 2)) {
              count++
              continue
            }

            let thisTarget = month[factory].thisTarget
            let thisYear = month[factory].thisYear
            let lastYear = month[factory].lastYear

            content += `
                <tr>
                  <td style="text-align: left;">&nbsp;${ factory }&nbsp;</td>
                  <td>加工1</td>
            `
            if (hasTarget) {
              content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate1 : 0 }%</td>
              `
            }
            if (hasThis) {
              if (hasTarget) {
                let diff = (thisTarget ? thisTarget.rate1 : 0) - (thisYear ? thisYear.rate1 : 0)
                if (diff > 0) {
                  content += `
                    <td style="color: red;">${ thisYear ? thisYear.rate1 : 0 }%</td>
                  `
                } else {
                  content += `
                    <td>${ thisYear ? thisYear.rate1 : 0 }%</td>
                  `
                }
              } else {
                content += `
                    <td>${ thisYear ? thisYear.rate1 : 0 }%</td>
                `
              }
            }
            if (hasLast) {
              content += `
                  <td>${ lastYear ? lastYear.rate1 : 0 }%</td>
              `
            }
            if (hasThis && hasLast) {
              let diff = (thisYear ? thisYear.rate1 : 0) - (lastYear ? lastYear.rate1 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: blue;">+${ diff }%</td>
                `
              } else {
                content += `
                  <td style="color: red;">${ diff }%</td>
                `
              }
            }
            content += `
                </tr>
            `

            content += `
                <tr>
                  <td></td>
                  <td>裁断</td>
            `
            if (hasTarget) {
              content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate2 : 0 }%</td>
              `
            }
            if (hasThis) {
              if (hasTarget) {
                let diff = (thisTarget ? thisTarget.rate2 : 0) - (thisYear ? thisYear.rate2 : 0)
                if (diff > 0) {
                  content += `
                    <td style="color: red;">${ thisYear ? thisYear.rate2 : 0 }%</td>
                  `
                } else {
                  content += `
                    <td>${ thisYear ? thisYear.rate2 : 0 }%</td>
                  `
                }
              } else {
                content += `
                    <td>${ thisYear ? thisYear.rate2 : 0 }%</td>
                `
              }
            }
            if (hasLast) {
              content += `
                  <td>${ lastYear ? lastYear.rate2 : 0 }%</td>
              `
            }
            if (hasThis && hasLast) {
              let diff = (thisYear ? thisYear.rate2 : 0) - (lastYear ? lastYear.rate2 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: blue;">+${ diff }%</td>
                `
              } else {
                content += `
                  <td style="color: red;">${ diff }%</td>
                `
              }
            }
            content += `
                </tr>
            `

            content += `
                <tr>
                  <td></td>
                  <td>鞋面</td>
            `
            if (hasTarget) {
              content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate3 : 0 }%</td>
              `
            }
            if (hasThis) {
              if (hasTarget) {
                let diff = (thisTarget ? thisTarget.rate3 : 0) - (thisYear ? thisYear.rate3 : 0)
                if (diff > 0) {
                  content += `
                    <td style="color: red;">${ thisYear ? thisYear.rate3 : 0 }%</td>
                  `
                } else {
                  content += `
                    <td>${ thisYear ? thisYear.rate3 : 0 }%</td>
                  `
                }
              } else {
                content += `
                    <td>${ thisYear ? thisYear.rate3 : 0 }%</td>
                `
              }
            }
            if (hasLast) {
              content += `
                  <td>${ lastYear ? lastYear.rate3 : 0 }%</td>
              `
            }
            if (hasThis && hasLast) {
              let diff = (thisYear ? thisYear.rate3 : 0) - (lastYear ? lastYear.rate3 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: blue;">+${ diff }%</td>
                `
              } else {
                content += `
                  <td style="color: red;">${ diff }%</td>
                `
              }
            }
            content += `
                </tr>
            `
            
            content += `
                <tr>
                  <td></td>
                  <td>半成品</td>
            `
            if (hasTarget) {
              content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate4 : 0 }%</td>
              `
            }
            if (hasThis) {
              if (hasTarget) {
                let diff = (thisTarget ? thisTarget.rate4 : 0) - (thisYear ? thisYear.rate4 : 0)
                if (diff > 0) {
                  content += `
                    <td style="color: red;">${ thisYear ? thisYear.rate4 : 0 }%</td>
                  `
                } else {
                  content += `
                    <td>${ thisYear ? thisYear.rate4 : 0 }%</td>
                  `
                }
              } else {
                content += `
                    <td>${ thisYear ? thisYear.rate4 : 0 }%</td>
                `
              }
            }
            if (hasLast) {
              content += `
                  <td>${ lastYear ? lastYear.rate4 : 0 }%</td>
              `
            }
            if (hasThis && hasLast) {
              let diff = (thisYear ? thisYear.rate4 : 0) - (lastYear ? lastYear.rate4 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: blue;">+${ diff }%</td>
                `
              } else {
                content += `
                  <td style="color: red;">${ diff }%</td>
                `
              }
            }
            content += `
                </tr>
            `

            content += `
                <tr>
                  <td></td>
                  <td>成型</td>
            `
            if (hasTarget) {
              content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate5 : 0 }%</td>
              `
            }
            if (hasThis) {
              if (hasTarget) {
                let diff = (thisTarget ? thisTarget.rate5 : 0) - (thisYear ? thisYear.rate5 : 0)
                if (diff > 0) {
                  content += `
                    <td style="color: red;">${ thisYear ? thisYear.rate5 : 0 }%</td>
                  `
                } else {
                  content += `
                    <td>${ thisYear ? thisYear.rate5 : 0 }%</td>
                  `
                }
              } else {
                content += `
                    <td>${ thisYear ? thisYear.rate5 : 0 }%</td>
                `
              }
            }
            if (hasLast) {
              content += `
                  <td>${ lastYear ? lastYear.rate5 : 0 }%</td>
              `
            }
            if (hasThis && hasLast) {
              let diff = (thisYear ? thisYear.rate5 : 0) - (lastYear ? lastYear.rate5 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: blue;">+${ diff }%</td>
                `
              } else {
                content += `
                  <td style="color: red;">${ diff }%</td>
                `
              }
            }
            content += `
                </tr>
            `

            content += `
                <tr>
                  <td></td>
                  <td>合计</td>
            `
            if (hasTarget) {
              content += `
                  <td>&nbsp;${ thisTarget ? thisTarget.rate6 : 0 }%</td>
              `
            }
            if (hasThis) {
              if (hasTarget) {
                let diff = (thisTarget ? thisTarget.rate6 : 0) - (thisYear ? thisYear.rate6 : 0)
                if (diff > 0) {
                  content += `
                    <td style="color: red;">${ thisYear ? thisYear.rate6 : 0 }%</td>
                  `
                } else {
                  content += `
                    <td>${ thisYear ? thisYear.rate6 : 0 }%</td>
                  `
                }
              } else {
                content += `
                    <td>${ thisYear ? thisYear.rate6 : 0 }%</td>
                `
              }
            }
            if (hasLast) {
              content += `
                  <td>${ lastYear ? lastYear.rate6 : 0 }%</td>
              `
            }
            if (hasThis && hasLast) {
              let diff = (thisYear ? thisYear.rate6 : 0) - (lastYear ? lastYear.rate6 : 0)
              if (diff > 0) {
                content += `
                  <td style="color: blue;">+${ diff }%</td>
                `
              } else {
                content += `
                  <td style="color: red;">${ diff }%</td>
                `
              }
            }
            content += `
                </tr>
            `
          }

          content += `
              </tbody>
            </table>
          `
        }

        content += `
          </div>
        `

        return content
      }
    }
  }

  myChart.setOption(option)
}

function myChartResize() {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(async () => {
  await getPureChart()
  await getPureDetail()
  init()
  
  window.addEventListener('resize', myChartResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', myChartResize)
})
</script>

<template>
  <div id="brand-pure-chart" ref="main"></div>
</template>

<style lang="scss" scoped>
#brand-pure-chart {
  width: 100%;
  height: 100%;
}
</style>